<template>
    <div v-if="isActive" class="tab-pane">
        <slot></slot>
    </div>
</template>

<script setup lang="ts">
const props = defineProps({
    label: {
        type: String,
        required: true
    },
    path: String,
    icon: String,
    quantity: Number,
    index: Number
})

const tabsContext = inject('tabsContext') as any

const index = ref(0)

const activeIndex = computed(() => tabsContext.activeIndex.value)
const isActive = computed(() => activeIndex.value === index.value)

onMounted(() => {
    index.value = tabsContext.registerTab({
        label:props.label,
        path:props.path,
        icon:props.icon,
        quantity:props.quantity,
        index:props.index
    })
})

watch(() => props.quantity, (newValue) => {
    tabsContext.unregisterTab(props.index,newValue)
}, {
    immediate: true, // 如果需要首次加载就触发注册
})


</script>

<style scoped></style>